<template>
  <div class="my-container">
    <!-- 未登录 -->
    <div class="header not-login" v-if="JSON.stringify(token) == '{}'">
      <img src="../../assets/img/banner-bg.png" alt="" />
      <div class="wrap">
        <van-image
          width="50"
          height="50"
          round
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /><span @click="login">立即登录</span>
      </div>
    </div>

    <!-- 已登录 -->
    <div class="header user-info" v-else>
      <img src="../../assets/img/banner-bg.png" alt="" />
      <div class="wrap">
        <van-image width="50" height="50" round :src="user_photo" />
        <div class="information">
          <span class="name" @click="$router.push('/information')">
            {{ username }}
          </span>
          <i class="update">点击可编辑资料</i>
        </div>
      </div>
    </div>

    <div class="myorder">
      <van-cell-group>
        <van-cell
          title="我的订单"
          value="查看全部订单"
          is-link
          @click="tomyOrder(4)"
        />
      </van-cell-group>
      <!-- Grid 宫格 -->
      <div class="grid">
        <van-grid>
          <van-grid-item text="待确认" @click="tomyOrder(0)">
            <div slot="icon" class="iconfont icondengdaiqueren"></div>
          </van-grid-item>
          <van-grid-item text="待支付" @click="tomyOrder(1)">
            <div slot="icon" class="iconfont icondaifuwu"></div>
          </van-grid-item>
          <van-grid-item text="待服务" @click="tomyOrder(2)">
            <div slot="icon" class="iconfont icondaizhifu-"></div>
          </van-grid-item>
          <van-grid-item text="待评价" @click="tomyOrder(3)">
            <div slot="icon" class="iconfont icondaipingjia"></div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

    <!-- 单元格 -->
    <div>
      <van-cell-group>
        <van-cell title="地址" value="" is-link to="/my-address" />
        <van-cell title="加盟" value="企业入驻/个人发布" is-link />
        <van-cell title="聊天设置" value="" is-link />
        <van-cell title="帮助" value="" is-link />
      </van-cell-group>
    </div>

    <!-- 退出登录 -->
    <div class="login_out">
      <van-button
        v-if="JSON.stringify(token) !== '{}'"
        class="out_btn"
        type="danger"
        plain
        size="large"
        round
        @click="loginOut"
        >退出登录</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import store from "@/store";

export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    ...mapMutations("user", ["removeToken"]),
    ...mapMutations("cart", ["removeDefaultAddress"]),
    login() {
      this.$router.push("/login");
      console.log(1232);
    },
    // 退出登录
    loginOut() {
      this.$dialog
        .confirm({
          message: "是否退出登录",
        })
        // 确认退出
        .then(() => {
          // 清空本地存储的数据
          this.removeToken();
          this.removeDefaultAddress();
          this.$router.push("/login");
          // on confirm
        })
        // 取消退出
        .catch(() => {
          // on cancel
          this.$toast("取消退出");
        });
    },
    tomyOrder(i) {
      store.commit("cart/updateActive", i);
      this.$router.push("/my-allorder");
    },
  },
  computed: {
    ...mapGetters([
      "username",
      "user_photo",
      "token",
      "id",
      "address",
      "active",
    ]),
  },
};
</script>

<style lang="less" scoped>
.my-container {
  .information {
    display: flex;
    flex-direction: column;
    .name {
      font-size: 20px;
    }
    .update {
      font-size: 10px;
      font-style: normal;
      margin-left: 8px;
    }
  }

  .header {
    position: relative;
    height: 125px;
    background: linear-gradient(45deg, #e6454d 0, #ff884c 100%);
    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 0;
    }
    .wrap {
      display: flex;
      align-items: center;
      padding: 40px 0 28px 20px;
      color: #fff;
      span {
        font-size: 16px;
        margin-left: 10px;
        z-index: 2;
      }
    }
  }
  .myorder {
    margin-top: 15px;
  }
  .grid {
    margin-bottom: 15px;
    .van-grid-item {
      font-size: 14px;
    }
    .iconfont {
      font-size: 25px;
      color: rgb(254, 117, 93);
    }
  }
  .login_out {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    .out_btn {
      width: 240px;
    }
  }
}
</style>
